<template>
  <div class="container">
    <Dialog v-show="show"></Dialog>
    <div class="header">
      <img  class="icon_one" src="../assets/prevs.png" alt="" @click="huitui">
      <span @click="toggleRouter(0)" :style="{'color' :index === 0 ? '#2879e7' : '#000'}">商品</span>
      <span @click="toggleRouter(1)" :style="{'color' :index === 1 ? '#2879e7' : '#000'}">详情</span>
      <span :style="{left: index*11.4 + 'vw'}" class="commodity"></span>
      <img class="icon_tow" src="../assets/transpond.png" alt="">
    </div>
    <div class="betterScroll" ref="con">
    <div :style="{marginTop: index*-155 + 'vw'}" class="body">
    <div class="containe">
      <van-swipe @change="onChange">
        <van-swipe-item v-for="(item,key) in jump.prodImage" :key="key">
          <img class="shuffling" :src="item" alt="#"></van-swipe-item>
        <div class="custom-indicator" slot="indicator">
          {{ current + 1 }}/{{jump.prodImage.length}}
        </div>
      </van-swipe>
    </div>
    <ul class="main">
      <li class="Price">
        <p class="font_one">{{jump.prodSupTitle}}</p>
        <p class="font_tow">该商品最高可以使用30元优惠卷</p>
        <p class="money">￥{{this.money}}</p>
      </li>
      <li class="guarantee">
        <img src="../assets/zhengping.jpg" alt="">
        <span>100%正品保障</span>
      </li>
      <li class="DeliveryAddress">
        <span>配送至</span>
        <span>北京顺义区光明街道</span>
        <span><img class="icon-tow"  src="../assets/goto.png" alt="#"></span>
        <p class="goods">有货</p>
      </li>
      <li class="Choice">
        <span>已选</span>
        <span>1件</span>
        <img class="icon-there" src="../assets/goto.png" alt="">
      </li>
    </ul>
      <div class="block"></div>
    <div class="footer">
      <div class="footer_header">
        <span class="footer_header--block"></span>
        <span>商品详情</span>
      </div>
      <div class="image-img" v-for="(item, key) in jump.prodImage" :key="key">
        <img :src="item" alt="">
      </div>
      <div class="Specifications">
        <span class="footer_header--block"></span>
        <span>规格参数</span><br>
      </div>
      <span class="Specifications--block"></span>
    </div>
    </div>
    </div>
      <div class="dibu">
        <img class="image" src="../assets/gouwuche.png" alt="" @click="cart">
        <span class="dibu--num" v-if="isShow">{{this.Accessionnum}}</span>
        <img class="img" src="../assets/kefu.png" alt="">
        <span class="ShoppingCart" @click="Accession">加入购物车</span>
        <span class="purchase" @click="ShoppingCart">立即购买</span>
      </div>
  </div>
</template>

<script>
  import Dialog from '../Dialog/ShoppingCart--Dialog';
  export default {
    name: "goods",
    data(){
      return {
        index: 0,
        jump:[],
        userInfo: [],
        current: 0,
        bsl: null,
        prodid: '',
        num: '',
        money: '',
        show: false,
        isShow: false,
        Accessionnum: 0,
      }
    },
    methods:{
      huitui(){
        this.$router.go(-1);
      },
      onChange(index) {
        this.current = index;
      },
      toggleRouter(key) {
        this.index = key;
      },
      ShoppingCart(){
        this.show = true;
      },
      Accession(){
        this.isShow = true;
        this.Accessionnum++;
      },
      cart(){
        this.$apis.commodity()
          .then(data => {
            this.$router.push({name: 'commodity'});
            console.log(data);
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    created(){
      this.jump = this.$route.params.data;
      console.log(this.jump);
      this.prodid = this.$route.params.data['_id'];
      this.money = this.$route.params.data.currentPrice;
      this.$nextTick(() => {
        if (!this.bsl) {
          this.bsl = new this.$BScroll(this.$refs.con, {
            scrollX: false,
            scrollY: true,
            click: true,
          })
        } else {
          this.bsl.refresh();
        }
      })
    },
    mounted() {
      this.$Bus.$on('w', () => this.show = false);
      this.$Bus.$emit('x', this.jump);
    },
    components: {
      Dialog,
    }
  }
</script>

<style lang="scss" scoped>
  *{
    padding: 0;
    margin: 0;
  }
  .container{
    width: 100vw;
    height: 100vh;
    background: #f2f2f2;
    .header{
      width: 100vw;
      height: 91px;
      top: -11px;
      background: #ffffff;
      text-align: center;
      font-size: 37px;
      line-height: 91px;
      position: fixed;
      z-index: 9;
    }
    .betterScroll {
      width: 100vw;
      height: 89vh;
      position: relative;
      top: 81px;
    }
    .body{
      position: relative;
      display: inline-block;
      top: -10px;
      transition: all .3s ease-in-out;
    }
    .Price{
      border-bottom: #e3e3e3 1px solid;
      height: 180px;
    }
    .icon_one{
      width: 45px;
      height: 41px;
      position: absolute;
      left: 31px;
      bottom: 27px;

    }
    .icon_tow{
      width: 44px;
      height: 45px;
      position: absolute;
      right: 30px;
      bottom: 27px;
    }
    .money{
      font-size: 31px;
      color: #666666;
      position: relative;
      top: 40px;
      text-indent: 5px;
    }
    .guarantee{
      width: 100vw;
      height: 60px;
      border-bottom: #e3e3e3 1px solid;
      position: relative;
    }
    .guarantee>img {
      display: inline-block;
      width: 30px;
      position: relative;
      top: 3px;
      left: 15px;
    }
    .guarantee>span{
      line-height: 60px;
      color: #999;
      position: relative;
      left: 25px;
    }
    .header>span{
      line-height: 91px;
      font-weight: bold;
    }
    .DeliveryAddress{
      width: 100vw;
      height: 120px;
      border-bottom: #e3e3e3 1px solid;
      position: relative;
    }
    .DeliveryAddress>span{
      position: relative;
      left: 15px;
      top: 10px;
    }
    .DeliveryAddress>span:nth-child(1){
      font-size: 27px;
      color: #666666;
    }
    .DeliveryAddress>span:nth-child(2){
      font-size: 27px;
      position: relative;
      line-height: 20px;
      left: 30px;
    }
    .DeliveryAddress>span>img{
      position: relative;
      top: 3px;
      left: 350px;
      height: 20px;
    }
    .goods{
      display: block;
      position: relative;
      width: 90px;
      height: 40px;
      color: orange;
      border: orange 2px solid;
      text-align: center;
      line-height: 40px;
      font-size: 28px;
      top: 30px;
      border-radius: 8px;
      left: 110px;
    }
    .Choice{
      width: 100vw;
      height: 60px;
      border-bottom: #e3e3e3 1px solid;
      position: relative;
      line-height: 60px;
    }
    .Choice>span:nth-child(1){
      font-size: 22px;
      color: #666666;
      position: relative;
      left: 15px;
    }
    .Choice>span:nth-child(2){
      font-size: 22px;
      color: #666666;
      position: relative;
      left: 50px;
    }
    .Choice>img{
      position: relative;
      top: 3px;
      left: 600px;
      height: 20px;
    }
    .block{
      width: 100vw;
      height: 20px;
      background: #e9e9e9;
    }
    .containe{
      height: 752px;
      width: 100vw;
      background: #ffffff;
      margin-top: 13px;
      .shuffling{
        height: 752px;
        width: 100vw;
      }
      .custom-indicator{
        display: inline-block;
        position: relative;
        width: 70px;
        height: 40px;
        background: rgba(0,0,0,.4);
        text-align: center;
        line-height: 40px;
        color: white;
        top: -70px;
        border-radius: 18px;
        left: 660px;
      }
    }
    .containe_picture{
      height: 750px;
      width: 100vw;
    }
    .main{
      width: 100vw;
      height: 420px;
      background: #ffffff;
      margin-top: 44px;
      .font_one{
        font-size: 31px;
        color: black;
        text-indent: 25px;
        position: relative;
        top: 15px;
      }
      .font_tow{
        font-size: 27px;
        color: #fa4355;
        text-indent: 10px;
        position: relative;
        top: 30px;
      }
    }
    .icon-tow{
      width: 25px;
      height: 36px;
    }
    .icon-there{
      width: 25px;
      height: 36px;
    }
    .footer{
      width: 100vw;
      background: #ffffff;
    }
    .footer_header{
      width: 100vw;
      height: 64px;
      background: #ffffff;
      position: relative;
      line-height: 64px;
    }
    .footer_header--block{
      display: inline-block;
      width: 5px;
      height: 32px;
      background: #0077aa;
      position: relative;
      top: 4px;
      left: 20px;
    }
    .footer_header>span:nth-child(2){
      font-size: 34px;
      position: relative;
      left: 40px;
    }
    .Specifications--block{
      display: block;
      width: 100vw;
      height: 150px;
      background: #f2f2f2;
    }
    .image-img>img{
      display: block;
      width: 100vw;
    }
    .Specifications{
      width: 100vw;
      height: 64px;
      background: #ffffff;
      position: relative;
      line-height: 64px;
    }
    .Specifications>span:nth-child(2){
      font-size: 34px;
      position: relative;
      left: 40px;
    }
    .dibu{
      width: 100vw;
      height: 80px;
      position: fixed;
      bottom: 0;
      font-size: 28px;
      line-height: 80px;
      background: white;
      box-shadow: 0 0 1px #999;
    }
    .image{
      width: .6rem;
      height: .6rem;
      position: fixed;
      left: .5rem;
      bottom: .2rem;
    }
    .img{
      width: .6rem;
      height: .6rem;
      left: .5rem;
      bottom: .2rem;
      position: fixed;
      margin-left: 1.5rem;
    }
    .dibu>span{
      display: inline-block;
      position: fixed;
    }
    .dibu--num{
      display: inline-block;
      position: fixed;
      width: 25px;
      height: 25px;
      background: red;
      border-radius: 50%;
      font-size: 12px;
      text-align: center;
      line-height: 25px;
      color: white;
      left: .95rem;
      bottom: .47rem;
    }
    .ShoppingCart{
      font-size: 22px;
      display: inline-block;
      position: relative;
      width: 230px;
      height: 60px;
      background: #ff6b16;
      border-top-left-radius: 32px;
      border-bottom-left-radius: 32px;
      text-align: center;
      line-height: 60px;
      color: white;
      left: 3.34rem;
      bottom: .14rem;
    }
    .purchase{
      font-size: 22px;
      display: inline-block;
      position: relative;
      width: 230px;
      height: 60px;
      background: #39a9ff;
      border-top-right-radius: 32px;
      border-bottom-right-radius: 32px;
      text-align: center;
      line-height: 60px;
      left: 6.4rem;
      color: white;
      bottom: .14rem;
    }
    .commodity{
      font-size: 33px;
      width: 12vw;
      height: 91px;
      border-radius: 1px;
      position: relative;
      top: 1px;
      left: 0;
      bottom: .3rem;
      transition: all .3s ease-in-out;
      &::before{
        content: '';
        background: #2879e7;
        display: inline-block;
        position: absolute;
        left: -3.3rem;
        right: 0;
        top: .75rem;
        bottom: 0;
        margin: auto;
        width: 2em;
        height: 5px;
      }
    }
  }
</style>
